import Vue from "vue";
import App from "./App.vue";
import "@/assets/css/bootstrap.css";

Vue.config.productionTip = false;

// 0. 装包yarn add vuex
// 1. 导入Vuex 模块
import Vuex from "vuex";

// 2. 给Vue装插件
Vue.use(Vuex);

// 导入子模块
import count from './store/count'
import todo from './store/todo'

// 3. 创建store的实例对象
const store = new Vuex.Store({

  // 注册子模块
  // 模块名: 模块对象
  modules: {
    count,
    todo
  },

  // Vuex配置对象
  // 核心成员:state
  // 作用: 存储全局共享的数据
  // state是一个对象, 数据存储在对象上
  state: {
    count: 0,
    name: "wjr",
    list: [
      { id: 100, name: "吃饭", isDone: true },
      { id: 101, name: "睡觉", isDone: false },
      { id: 102, name: "打豆豆", isDone: true },
    ],
  },
  mutations: {
    // 所有 mutation中的函数, 第一个参数都是 state
    // 通过 state可以直接获取全局的数据, 进行操作
    // payload ：载荷, 如果要接受更多的数据，只能通过这一个对象传递过来
    // 注意: mutation 函数只有2个参数, 第一个是state第二个是 payload, 如果需要传递多个参数过来, 可以传一个对象, 在对象中定义多个属性
    add(state, payload) {
      // 修改数据必须由 mutation 中的函数来完成

      state.count += payload.num;
    },
    sub(state, payload) {
      // 下面这种代码是必须要禁止的
      // setTimeout(() => {
      //   state.count += payload.num
      // }, 500)
    },
  },
  actions: {

    subAsync(context, payload) {

      setTimeout(() => {

        context.commit("add", payload);
      }, 1000);
    },
  },
  getters: {
    isAll(state) {
      return state.list.every((item) => item.isDone);
    },
  },
});

// 4. 挂载到 Vue 身上
new Vue({
  render: (h) => h(App),
  store,
}).$mount("#app");
